<template>
  <div>
    <div>Page is Search</div>
    <ul><li v-for="(item,index) in $store.state.navbar.app" :key="index">{{item}}</li></ul>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    layout: 'search',
    data(){
      return{
         cityList:[]
      }
    },
    // async mounted(){//只在浏览器端发生了效果，不会再服务器端执行，在下发的模板代码中找不到数据。
    //   let {status,data}=await axios.get('/city/list');
    //   if(status==200){//请求成功
    //      this.cityList=data;
    //   }
    // }
    //做ssr
    //asyncData主要处理组件的数据
    //fetch主要用来处理vuex的数据
    //服务端将模板下发给浏览器，数据已经嵌入模板，同时下发了一个script，通过在windows上创建了一个对象_NUXT_，将组件所用的模板和数据内容挂载到这个对象上。
    async asyncData(){
      let {status,data}=await axios.get('http://localhost:3000/city/list');
      if(status==200){
         return{
            cityList:data
         }
      }
    }
}
</script>
<style scoped>
</style>
